<template>
  <guide :guideObj="{title: config.configType}" @backHome="backHome">
    <el-popover
      placement="bottom"
      width="180"
      slot="button"
      v-model="visible2"
    >
      <p class="popover">因简单版设置里暂时没有该项配置，需要切换到旧版设置进行配置。旧版设置该项的位置在【设置】-【渠道设置】-【在线咨询全局设置】-【在线咨询访客端】</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
        <el-button type="primary" size="mini" @click.stop="jumpToConfig">我知道了</el-button>
      </div>
      <button type="button" slot="reference" class="el-button primary_btn" >我要自己配</button>
    </el-popover>
    <div slot="warn" class="description">
      温馨提示：
      <ul>
        <li>1.为了节省您的时间，售后人员将为您免费提供配置服务，只需填写下方的申请配置内容，点击提交，售后人员收到申请后会按照您的要求完成配置服务。
        </li>
        <li>2.您可以点击顶部工具条【?】里的【服务工单】查看您所有的配置申请的动态并进行回复。注意：工作时间为9:00——18:00，非工作时间不进行配置，如需紧急支持请拨打客服热线：4001-113-114。
        </li>
      </ul>
    </div>
    <div slot="directions" class="description">
      <p>
        1、访客输入敏感词过滤：当访客给座席发送辱骂，政治，色情等性质的敏感词时，系统将会以 **进行屏蔽，即座席端看到的是 **，如下图：
      </p>
      <el-row :gutter="30">
        <el-col :span="10">
          <img src="../../../../assets/img/configHelp/webchatWord1.png" alt="" style="width:360px">
        </el-col>
        <el-col :span="10">
          <img src="../../../../assets/img/configHelp/webchatWord2.png" alt="" style="width:360px">
        </el-col>
        <el-col :span="20">
          <img src="../../../../assets/img/configHelp/webchatWord3.png" alt="" style="width: 612px">
        </el-col>
      </el-row>
      <p>
        2、设置座席关注敏感词：当访客给座席发了关注敏感词后，座席将会看到词句中关注词被标记了颜色，吸引其注意力投入关注，如下图的【联系方式】为座席关注词：
      </p>
      <img src="../../../../assets/img/configHelp/webchatWord4.png" alt="" style="width:612px">
    </div>
    <el-row slot="application" :gutter="20">
      <el-col :span="12">
        <business-form :config="config" :cssStyle="{row: 12, placeHolder: '小提示:可复制粘贴右侧模板内容后按照格式进行修改。'}" ref="businessForm" @backHome="backHome"></business-form>
      </el-col>
      <el-col :span="12">
        <div class="business-flow-example">
          <h2 class="font14" style="padding-bottom: 10px">配置说明模板</h2>
          <span class="copyText" @click="copyText"><i class="iconfont icon-fuzhi add-flow-color"></i>&nbsp;复制</span>
          <ul class="business-flow-example-ul" id="qualitycheck-copy">
            <li>
              访客敏感词过滤：关（不写则保持现有配置）
            </li>
            <li class="first">
              <ul class="second disclist">
                <li>
                  座席关注词增加（新增）：
                  <ul class="circlelist">
                    <li>关注词1</li>
                    <li>关注词2</li>
                    <li>关注词3</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="first">
              <ul class="second disclist">
                <li>座席关注词删减（从已有的里面删除）：
                  <ul class="circlelist">
                    <li>关注词4</li>
                    <li>关注词5</li>
                    <li>关注词6</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </guide>
</template>

<script>
  import Guide from '../../../ui-modules/guide/index'
  import BusinessForm from './businessCommon'
  import Clipboard from 'clipboard-js'
  export default {
    name: 'qualitycheckHelp',
    data () {
      return {
        visible2: false
      }
    },
    props: {
      config: Object
    },
    components: {
      Guide,
      BusinessForm
    },
    activated () {
      this.$refs.businessForm.resetForm()
    },
    inject: ['back'],
    methods: {
      copyText () {
        let self = this
        Clipboard.copy(document.getElementById('qualitycheck-copy').innerText).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      backHome () {
        this.back()
      },
      jumpToConfig () {
        this.visible2 = false
        // this.$router.push('/index/config/qualityCheckConfig')
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "../../../../assets/common.styl"
  .description
    p
      padding 10px 0
    ul
      padding 10px 0
    ul ul
      padding 10px 0 10px 40px
    li
      display list-item
      margin:0
  .business-flow-example
    position relative
    margin: 20px auto 0
    padding 10px 30px
    background: #fafafa
    .copyText
      position absolute
      right 20px
      top 10px
      cursor pointer
    li
      line-height 24px
      font-size 12px
      color $cf-gray3
  .icon-fuzhi
    color $c-main
  .popover
    padding 5px
  img
    max-width 100%
    width auto
    border 10px solid #f7f7f7
    border-radius 5px
    margin 10px 0
</style>
